<template>
  <q-dialog v-model="showDialog" persistent>
    <q-card>
      <q-card-section
        class="row items-center q-ml-lg q-mt-lg"
        style="min-width: 400px"
      >
        <div class="display-item col-10" v-if="dateType === 'month'">
          <div class="dynamic-form-item">
            <div class="dynamic-form-item-label" style="width: 100%">
              <q-icon name="star" color="red" />
              考核月份
            </div>
            <input-date-picker
              dense
              debounce="500"
              hide-bottom-space
              outlined
              v-model="month"
              type="yearmonth"
              beginDate=""
              endDate=""
              lazy-rules
            />
          </div>
        </div>
        <div class="display-item col-10" v-if="dateType === 'year'">
          <div class="dynamic-form-item">
            <div class="dynamic-form-item-label" style="width: 100%">
              <q-icon name="star" color="red" />
              考核年份
            </div>
            <input-date-picker
              dense
              debounce="500"
              hide-bottom-space
              outlined
              v-model="year"
              type="year"
              beginDate=""
              endDate=""
              lazy-rules
            />
          </div>
        </div>
      </q-card-section>

      <q-card-actions class="row justify-center q-pa-md">
        <div>
          <q-btn
            class="q-mr-sm"
            v-if="hasCancel"
            outline
            color="primary"
            icon="mdi-close-thick"
            label="关闭"
            v-close-popup
          />
          <q-btn
            class="q-ml-sm"
            color="primary"
            icon="mdi-check-bold"
            label="确定"
            @click="$emit('confirm')"
            v-close-popup
          />
        </div>
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script>
export default {
  props: {
    hasCancel: {
      type: Boolean,
      required: false,
      default: true,
    },
    dateType: {
      type: String,
      required: false,
      default: 'month',
    },
  },
  data() {
    return {
      year: null,
      month: null,
      showDialog: false,
    };
  },
  methods: {
    show() {
      this.showDialog = true;
    },
    lastMonth() {
      const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      if (month === 1) {
        month = 12;
        year -= 1;
      }
      if (month < 10) {
        month -= 1;
      }
      if (month >= 1 && month <= 9) {
        month = `0${month}`;
      }
      const currentdate = `${year}-${month}`;
      this.month = currentdate;
    },
    lastYear() {
      const date = new Date();
      const year = date.getFullYear() - 1;
      this.year = year;
    },
  },
};
</script>
